<template>
    <div class='deliverySet'>
        <el-dialog title="发货设置" visible @close="$emit('close')" width="1200px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="formLoading">
                <div style="margin-bottom: 30px;"><span class="tit">收货信息</span></div>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="收货人姓名：" prop="name">
                            <el-input style="width:215px;" v-model="form.name" placeholder="请输入收货人姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="收货人手机：" prop="mobile">
                            <el-input style="width:215px;" v-model="form.mobile" placeholder="请输入收货人手机" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="10">
                            <el-form-item label="收货地址所属省份:" prop="province" label-width="140px">
                                <el-select v-model="form.province" placeholder="请选择所属省份" @change="getCurrentCity" clearable>
                                    <el-option v-for="dict in areaData" :key="dict.code" :label="dict.name"
                                        :value="dict.name" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="所属城市:" prop="city">
                                <el-select v-model="form.city" placeholder="请选择所属城市" @change="getCurrentArea" filterable
                                    clearable>
                                    <el-option v-for="dict in currentCityList" :key="dict.code" :label="dict.name"
                                        :value="dict.name" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="所属区/县：" prop="area">
                                <el-select v-model="form.area" placeholder="请选择所属区/县" filterable clearable>
                                    <el-option v-for="dict in currentAreaList" :key="dict.code" :label="dict.name"
                                        :value="dict.name" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="详细地址：" prop="detailed">
                                <el-input v-model="form.detailed" placeholder="请输入详细地址" />
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>
                <el-divider></el-divider>

                <div style="margin-bottom: 30px;"><span class="tit">快递信息</span></div>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="快递配送公司:" prop="company_id" label-width="140px">
                            <el-select v-model="form.company_id" placeholder="请选择" clearable @change="$forceUpdate()">
                                <el-option v-for="dict in expressList" :key="dict.id" :label="dict.name" :value="dict.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="快递配送单号：" prop="send_number">
                            <el-input style="width:215px;" v-model="form.send_number" placeholder="请输入快递配送单号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="快递配送描述" prop="send_remark">
                            <el-input v-model="form.send_remark" type="textarea" rows="4"
                                placeholder="请输入快递配送描述"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </span>
            <!-- <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" /> -->
        </el-dialog>
    </div>
</template>

<script>
import throttle from 'lodash.throttle'
import { isvalidatemobile } from "@/utils/validate";
import { getPostageLists, getPostageSendInfo, setPostageSendInfo } from "@/api/order/goodsOrder.js"
export default {
    name: 'confirmPay',
    props: {
        orderNo: {
            type: String,
        }

    },
    components: {

    },
    data() {
        const ismobile = (rule, value, callback) => {
            if (isvalidatemobile(value)[0]) {
                callback(new Error(isvalidatemobile(value)[1]))
            } else {
                callback()
            }
        }
        return {
            loading: false,
            formLoading: false,
            currentCityList: [],
            currentAreaList: [],
            expressList: [],
            sendInfo: {},
            form: {
                order_no: this.orderNo,
            },
            rules: {
                name: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
                mobile: [{ required: true, message: '请输入联系方式', trigger: 'blur' }, { validator: ismobile, trigger: 'blur' }],
                province: [{ required: true, message: '请选择所属省份', trigger: 'blur' }],
                city: [{ required: true, message: '请选择所属城市', trigger: 'blur' }],
                area: [{ required: true, message: '请选择所属地区', trigger: 'blur' }],
                detailed: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
                send_number: [{ required: true, message: '请输入快递配送单号', trigger: 'blur' }],
                company_id: [{ required: true, message: '请选择快递配送公司', trigger: 'blur' }],
            },

        }
    },
    created() {
        this.getPostageLists()
        this.getPostageSendInfo()
    },
    methods: {
        getPostageSendInfo() {
            getPostageSendInfo({ order_no: this.orderNo }).then(res => {
                this.sendInfo = res.data
                console.log(this.sendInfo, 'info')
                this.$set(this.form, "area", this.sendInfo.address_area)
                this.$set(this.form, "detailed", this.sendInfo.address_detailed)
                this.$set(this.form, "name", this.sendInfo.address_name)
                this.$set(this.form, "mobile", this.sendInfo.address_mobile)
                this.$set(this.form, "send_number", this.sendInfo.send_number)
                this.$set(this.form, "send_remark", this.sendInfo.send_remark)
                this.$set(this.form, "province", this.sendInfo.address_province)
                if (this.sendInfo.company_id == 0) {
                    this.form.company_id = ''
                } else {
                    this.$set(this.form, "company_id", this.sendInfo.company_id)
                }
                if (this.form.province) {
                    this.currentCityList = this.areaData.find(item => item.name == this.form.province).cityList
                }
                this.$set(this.form, "city", this.sendInfo.address_city)
                if (this.form.city) {
                    this.currentAreaList = this.currentCityList.find(item => item.name == this.form.city).areaList
                }
                // if(this.sendInfo.company_name){
                //     this.form.company_id = this.expressList.find(item => item.name == this.sendInfo.company_name).id
                // }
                // this.$set(this.form, "company_id", this.sendInfo.company_code)
            });
        },
        getPostageLists() {
            getPostageLists().then(res => {
                this.expressList = res.data;
                console.log(this.expressList, 'kuaidi')
            });
        },
        getCurrentCity(val) {
            if (val) {
                this.$set(this.form, "city", null)
                this.$set(this.form, "area", null)
                this.currentAreaList = []
                this.currentCityList = this.areaData.find(item => item.name == val).cityList;
            }
        },
        getCurrentArea(val) {
            if (val) {
                this.$set(this.form, "area", null)
                this.currentAreaList = this.currentCityList.find(item => item.name == val).areaList;
            }
        },
        close() {
            this.form = {}
            this.$emit('close');
        },
        handleAvatarSuccess(res, file) {
            this.$set(this.form, 'image', res.data[0].fileurl)
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    setPostageSendInfo(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.$emit('load')
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false })
    },
}

</script>
<style scoped lang='scss'>
.tit {
    font-size: 24px;
}
</style>